<template>
  <div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell center title="添加新城市" icon="plus" @click="addCity"/>

        <van-cell v-for="(item,key) in list" :key="key" :title="item.name" :value="item.value" @click="editCity(key)" @touchstart.stop.prevent="showDeleteButton(key)" @touchend.stop.prevent="emptyTime"/>
      </van-list>
    </van-pull-refresh>
    <!--添加弹窗-->
    <van-popup
      style="padding:.5rem;border-radius: 12px"
      v-model="addShow"
      position="center"
      :style="{ height: '150px' }"
    >

      <van-row type="flex" justify="space-between"  >
        <van-col span="24">
          <!-- 输入任意文本 -->
          <van-cell-group>
          <van-field v-model="form.name" label="城市名称"  placeholder="请输入城市名称" />

          <van-field v-model="form.value" type="digit" label="人数"  placeholder="请输入人数" />
          </van-cell-group>
        </van-col>

      </van-row>
      <!-- 两端对齐 -->
      <van-row type="flex" justify="space-between" >
        <van-col span="24"><van-button block @click="addShow=false">取消</van-button></van-col>
        <van-col span="24"><van-button block @click="addConfirmNumber">确定</van-button></van-col>
      </van-row>
    </van-popup>
    <!--编辑弹窗-->
    <van-popup
      style="padding:.5rem;border-radius: 12px"
      v-model="editShow"
      position="center"
      :style="{ height: '150px' }"
    >

      <van-row type="flex" justify="space-between"  >
        <van-col span="24">
          <!-- 输入任意文本 -->
          <van-cell-group>
            <van-field v-model="form.name" label="城市名称"  placeholder="请输入城市名称" />

            <van-field v-model="form.value" type="digit" label="人数"  placeholder="请输入人数" />
          </van-cell-group>
        </van-col>

      </van-row>
      <!-- 两端对齐 -->
      <van-row type="flex" justify="space-between" >
        <van-col span="24"><van-button block @click="editShow=false">取消</van-button></van-col>
        <van-col span="24"><van-button block @click="editConfirmNumber">确定</van-button></van-col>
      </van-row>
    </van-popup>
    <img class="top" src="../../assets/image/top.png" @click="toTop"/>
  </div>
</template>

<script>
  import { Notify } from 'vant';
  export default {
    name: "CityCount",
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        page: 0,
        refreshing:false,
        addShow:false,
        editShow:false,
        form:{},
        Loop:null
      }
    },
    mounted() {

    },
    methods: {
      onRefresh() {
        this.page=0;
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      onLoad() {
        this.getData();
      },
      getData() {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        this.page++
        this.loading = true;
        this.$get("/cityCount/list", {page: this.page}).then(res => {
          if (res.code == 1) {
            this.loading = false;
            this.finished = true;
            return;
          }

          this.loading = false;
          res.data.forEach ((item)=>{
            this.list.push(item);
          });

        }).catch(function (err) {
          console.log(err);
        });
      },
      addCity(){
        this.form={};
        this.addShow=true;
      },
      addConfirmNumber(){

        if(this.form.name==""||this.form.name==undefined){
          Notify({ type: 'danger', message: '请输入城市名称' });
          return;
        }
        if(this.form.value==""||this.form.value==undefined){
          Notify({ type: 'danger', message: '请输入人数' });
          return;
        }
        this.$post("/cityCount/add",this.form).then(res=>{
          if(res.code==1){
            Notify({ type: 'danger', message: '添加失败，'+res.msg });
            return;
          }
          Notify({ type: 'success', message: '添加成功' });
          this.onRefresh();
          this.addShow=false;
        })
      },
      editCity(index){
        this.form = this.list[index];
        this.editShow=true;
      },
      editConfirmNumber(){

        if(this.form.name==""||this.form.name==undefined){
          Notify({ type: 'danger', message: '请输入城市名称' });
          return;
        }
        if(this.form.value==""||this.form.value==undefined){
          Notify({ type: 'danger', message: '请输入人数' });
          return;
        }
        this.$post("/cityCount/update",this.form).then(res=>{
          if(res.code==1){
            Notify({ type: 'danger', message: '修改失败，'+res.msg });
            return;
          }
          Notify({ type: 'success', message: '修改成功' });
          this.onRefresh();
          this.editShow=false;
        })
      },
      showDeleteButton(index){
        console.log("touchestart")
        clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
        this.Loop = setTimeout(function() {
          this.deleteData(index)
        }.bind(this), 1000);
      },
      emptyTime(){
        clearTimeout(this.Loop); //清空定时器，防止重复注册定时器
      },
      deleteData(index){
        Notify({ type: 'success', message: '长按事件' });
      },
      toTop() { //回到顶部动画
        document.documentElement.scrollTop -= 80;
        if (document.documentElement.scrollTop > 0) {
          var c = setTimeout(() => this.toTop(80), 16);
        } else {
          clearTimeout(c);
        }
      },
    }
  }
</script>

<style scoped>

  * {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  .top {
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    width: 3rem;
  }
</style>
